<template>
  <div class="flex">
    <vue-header :title="title"></vue-header>
    <infinite-container :loadMore="getComments" class="comments" ref="container"
      :status="comments.status"
    >
      <template v-if="infoCard || findData">
        <info-card v-bind="infoCard" v-if="infoCard"></info-card>
        <find-item :data="findData" v-if="findData" type="info" @dian_zan="toggle_zan"></find-item>
        
        <div class="com-fillTitle" v-if="imgs">{{ title }}图像</div>
        <div class="imgs">
          <vue-img v-for="(url, index) in imgs" :key="index" :src="url" class="img"
            @click.native="$deepToView('picViewer', { params: { url } })"
          ></vue-img>
        </div>

        <div class="com-fillTitle comment-title flex-row flex-between flex-vertical-center" v-if="comments.data">
          <div class="title">
            <span class="color-subtext">评论</span>
            <span :class="{ 'color-subtext': !comments.total }">
              {{ comments.total }}
            </span>
          </div>
          <img src="@img/btn/DetailsPage_btn_comment@2x.png" class="commentBtn" @click="openCommentEditor">
        </div>

        <template v-if="comments.status !== 5">
          <comment-item v-for="(item, index) in comments.data" :key="index" :data="item"></comment-item>
          <infinite-container-hint key="hint"
            :status="comments.status" :method="getComments"
          ></infinite-container-hint>
        </template>

        <div class="com-notData flex-grow" title="暂无内容" v-else></div>
      </template>
    </infinite-container>

    <div class="followFloatBtn" @click="$deepToView('qrCode')">
      <img src="@img/btn/follow_icon_QR@2x.png" style="width:1em; margin-right:10px;" />
      <span style="position:relative; left:-4px; top:2px">关注</span> 
    </div>

    <info-footer :collected="collected" :tel="tel" :type="type" :id="id" v-if="!hideFooter"></info-footer>
    
    <router-view></router-view>
  </div>
</template>

<script>
import InfoCard from '@c/block/InfoCard'
import InfoFooter from '@c/footer/infoFooter'
import CommentItem from '@c/item/CommentItem'
import FindItem from '@c/item/FindItem'
import InfiniteContainer from '@c/InfiniteContainer'
import InfiniteContainerHint from '@c/InfiniteContainerHint'

export default {
  props: ['id', 'title', 'type', 'loadDataMethod', 'hideFooter'],

  components: {
    InfoCard,
    InfoFooter,
    CommentItem,
    InfiniteContainer,
    InfiniteContainerHint,
    FindItem,
  },

  data (){
    return {
      infoCard: null,   // 传给infoCard的数据（头部）
      findData: null,   // 传给findItem的数据，用于显示find详情页
      imgs: null,       // 显示的图片
      collected: false, // 是否已收藏
      tel: '',         
      comments: {       // 评论
        data: null,
        page: 1,        // 当前页数
        pageTotal: 1,   // 总页数
        total: 0,       // 总评论数  
        status: 1       // 状态，1：初始，2：加载中，3：成功，4：全部加载，5：无数据，0：失败
      }
    }
  },

  mounted (){
    this.loadData()
    this.getComments()
  },

  watch: {
    $route (route){
      // 监听评论编辑页面发送回来的评论数据，拿到加入评论列表
      if(route.params.addComment){
        this.comments.data.unshift(route.params.addComment)
        this.comments.total++
        if(this.comments.status === 5) this.comments.status = 4
      }
    }
  },

  methods: {
    // 加载数据
    loadData (){
      this.loadDataMethod().then(data =>{
        if(data.infoCard){
          this.infoCard = data.infoCard
          this.imgs = data.imgs
          this.tel = data.tel
          this.collected = data.collected

          console.log(data.collected)
        }else{
          this.findData = data
          this.imgs = data.img.split(',')
        }
      })
    },

    // 获取评论
    getComments (){
      console.log(this.comments.page)
      if(this.comments.page <= this.comments.pageTotal){
        this.comments.status = 2
        _api('comment/getListByCon', {
          level: '0,2',
          f_table: this.type,
          p_id: 0,
          f_id: this.id,
          page: this.comments.page
        }, { loading: false }).then(data =>{
          this.comments.status = 3
          if(!this.comments.data) this.comments.data = []
          this.comments.data = this.comments.data.concat(data.data)
          this.comments.page = data.current_page
          this.comments.pageTotal = Math.ceil(data.total / data.per_page) || 1
          this.comments.total = data.total
          this.comments.page++
          if(this.comments.pageTotal === 1 && !this.comments.data.length){
            this.comments.status = 5
          }
        })
        .catch(() => this.comments.status = 0)
      }else{
        this.comments.status = this.comments.data.length ? 4 : 5
      }
    },

    // 开启评论界面。思路：把原路由传过去，发送完评论后将接口返回的数据直接拿回来加到列表内
    openCommentEditor (){
      this.$deepToView('comment', {
        params: {
          targetId: this.id,
          type: this.type === 'usedCar' ? 'used_car' : this.type,
          fromRoute: this.$route.name
        }
      })
    },

    toggle_zan (id, is_zan){
      _api('zan/setZanStatus', {
        f_id: id,
        status: !is_zan ? 1 : 0
      }).then(() =>{
        this.$alert.toast(!is_zan ? '点赞成功' : '取消点赞', 'success')
        this.findData.is_zan = !is_zan
        this.findData.zan_count += !is_zan ? 1 : -1
      })
    },

    openFollowLink (){
      location.href = 'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzU5NjkzODg4MQ==#wechat_redirect'
    }
  }
}
</script>

<style lang="less" scoped>
.imgs{
  text-align: center;
  font-size: 0;
}

.com-fillTitle{
  padding-right: 20px;
  box-sizing: border-box;
}

.commentBtn{
  width: 17px;
  height: 17px;
}

.followFloatBtn{
  font-size: 13px;
  display: flex;
  justify-content: right;
  align-items: center;
  box-sizing: border-box;
  padding-left: 10px;
  width: 60px;
  height: 30px;
  line-height: 30px;
  background-color: @theme;
  color: white;
  position: fixed;
  top: 120px;
  right: 0;
  border-radius: 20px 0 0 20px;
}
</style>